<template>
	<view>
		<view class="p10">
			<input v-model="test.id" placeholder="编号" type="number" />
		</view>
		<view class="p10">
			<input v-model="test.name" placeholder="姓名" type="text" />
		</view>
		<view>
			<button @click="parse" type="default">转换json</button>
		</view>
		<view>
			转换的结果：{{info}}
		</view>

		<view class="">
			<input type="text" v-model="user.username" placeholder="用户名" />
			<input type="password" v-model="user.password" placeholder="密码">
			<button type="warn" @click="login">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		ApiService
	} from '../../script/ApiService.js'

	const test = ref({
		id: 100,
		name: "用户名"
	})

	const info = ref("")

	const parse = () => {
		info.value = ApiService.get_url_params(test.value)
	}

	// 用户登录的测试
	const user = ref({
		"username": "",
		"password": "",
	})

	const login = () => {
		ApiService.post("/auth", user.value, (data) => {
			info.value = data
		})
	}
</script>

<style lang="scss" scoped>
	.p10 {
		padding: 1rem;
	}
</style>